<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/21
  Time: 13:37
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>菜单管理</title>
    <link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="static/themes/demo.css">
    <link rel="stylesheet" type="text/css" href="static/themes/color.css">
    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        /****初始化加载角色信息的DataGrid组件****/
        $(function () {
            $('#roleDataGrid').datagrid({
                url: 'role/roleInfo',
                pagination: true,//在表格中显示分页工具，将此属性设置为true，就会发送ajax分页请求
                rownumbers: true,//显示行号
                checkOnSelect: false,//避免点击即选中,只有点击复选框才会选中
                pageNumber: 1,//设置默认查询页码数
                pageSize: 2,//设置每页显示的数量
                pageList: [2, 4, 6],//设置每页数据量下拉框中的数据
                title: "查询结果",//显示标题
                toolbar:'#roleToolBar',
                columns: [[//设置表格的列以及每列和加载的数据的映射关系
                    {field:"aa",checkbox:true},
                    {field: 'rid', title: '角色编号', width: 100},
                    {field: 'rname', title: '角色名称', width: 100},
                    {field: 'rdesc', title: '角色描述', width: 100},
                ]]
            });
        });
        /****添加角色****/
        $(function () {
            $('#addRole').click(function () {
                $('#addRoleDialog').dialog('open')
            })
            //给表单提交按钮添加单击事件
            $("#addRoleForm").click(function () {
                //获取当前角色的添加的菜单权限
                var nodes = $('#menuAddTree').tree('getChecked',['checked','indeterminate'])
                var mids="";
                if(nodes.length>0){
                    for(var i =0;i<nodes.length;i++){
                        mids+=nodes[i].id+",";
                    }
                }
                //添加id数据
                $('#mids').val(mids);
                //异步提交
                $("#roleAddForm").form('submit',{
                    success:function (data) {
                        //转换
                        eval("var obj = "+ data);
                        //判断
                        if(obj.success){
                            $.messager.alert("提示","角色增加成功","info")
                            //关闭对话框
                            $("#addRoleDialog").dialog('close');
                            //重新加载角色的DataGrid
                            $("#roleDataGrid").datagrid('reload');
                        }else{
                            $.messager.alert("提示","角色增加失败","info")
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
<%--创建增加角色信息的对话框--%>
<div id="addRoleDialog" class="easyui-dialog" title="增加菜单" style="width:500px;height:500px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
    <div class="easyui-layout" data-options="fit:true">
        <%--增加角色--%>
        <div data-options="region:'west',split:false,title:'角色信息',collapsible:false"
             style="width:300px;padding:10px;text-align: center">
            <form id="roleAddForm" action="role/roleAdd" method="post" style="margin: auto;text-align: center">
                <%--创建隐藏标签，记录增加的角色菜单id--%>
                <input type="hidden" name="mids" id="mids"/>
                <div style="margin-bottom:20px;margin-top: 25px">
                    <input  class="easyui-textbox" name="rname" prompt="请输入角色名称" iconWidth="28" style="width:99%;height:34px;padding:10px;">
                </div>
                <div style="margin-bottom:20px">
                    <input  class="easyui-textbox" name="rdesc" prompt="请输入角色描述" iconWidth="28" style="width:99%;height:34px;padding:10px;">
                </div>
                <%--操作按钮--%>
                <div style="margin-bottom:20px">
                    <a  href="javascrip:void(0)" id="addRoleForm" class="easyui-linkbutton c3" style="width: 120px">增加</a>
                </div>
            </form>
        </div>
        <%--增加菜单--%>
        <div data-options="region:'center',title:'当前系统菜单'" style="padding:10px;width: 200px">
            <%--创建ul组件加载所有菜单信息--%>
                <ul class="easyui-tree"  id="menuAddTree" checkbox="true" data-options="url:'menu/menuAllInfo2'"></ul>
        </div>
    </div>
</div>

<%--创建更新角色信息的对话框--%>

<%--创建角色管理面板--%>
<div id="p" class="easyui-panel" title="角色管理"
     style="width:1250px;height:500px;padding:10px;background:#fafafa;"
     data-options="closable:false,
                collapsible:false,minimizable:false,maximizable:false">
    <%--创建主持人信息加载的dataGrid组件--%>
    <table id="roleDataGrid"></table>
</div>
<div id="roleToolBar">
    <a href="javascrpt:void(0)" id="addRole" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加角色</a>
    <a href="javascrpt:void(0)" id="editRole" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">更新角色</a>
    <a href="javascrpt:void(0)" id="hostAccount" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">删除角色</a>
</div>
</body>
</html>
